@model CustomerInfoModel
@using SpotsHub.Gateway.Models.Customer;
@{
    Layout = "~/Views/Shared/_MyHUB.cshtml";

    //title
    ViewBag.Title = T("Account.MyAccount") + " - " + T("Account.Dashboard");
    if(!string.IsNullOrEmpty(Model.Username))
    {
        Model.Username = Model.Username.Contains("@ExternalJS.Facebook.com") ? Model.FirstName + " " + Model.LastName : Model.Username;
    }
    if (!string.IsNullOrEmpty(Model.Email)) 
    {
        Model.Email = Model.Email.Contains("@ExternalJS.Facebook.com") ? Model.FirstName +" "+ Model.LastName  : Model.Email;
    }  
}
@section left
{
    @Html.Partial("MyAccountNavigation", Model.NavigationModel, new ViewDataDictionary())
}
<div class="page-dashboard">
    <div class="section-wrapper dashboard">
        <h3 class="section-title">@T("Account.Dashboard")</h3>
        <div class="automatic-datetime">
            <span id="automaticDateBar"></span> &nbsp; <span id="automaticTimeBar"></span>
        </div>
        <div class="row">
            <div class="col-xs-12 col-sm-6 dashboard-account">
                <span class="account-name">
                    @if (!String.IsNullOrEmpty(Model.Username)) { @Model.Username } else {@Model.FirstName<text>&nbsp;</text>@Model.LastName}
                </span><br />
                <span class="account-membership">
                    @Model.CurrentMembershipName @Html.Raw(Model.MembershipExpiringDate>DateTime.UtcNow?"(Expiring in "+Model.MembershipExpiringDate.Subtract(DateTime.UtcNow).Days.ToString()+" days)":"") - @Model.CurrentRegionName
                </span>
            </div>
            <div class="col-xs-12 col-sm-6 dashboard-account">
                <div class="account-company">
                    @Model.Company
                </div>
                <div class="account-email">
                    @Model.Email
                </div>
                <div class="account-type">
                    @Model.AccountType
                </div>
                <div class="account-payment">
                    @Model.PreferredPaymentMethod
                </div>
            </div>
            <div class="clear"></div>
        </div>
    </div>
    <div class="section-wrapper">
        <div class="dashboard-ctas row">
            
            <div class="col-sm-6 dashboard-cta commerce">
                <a href="@Url.Action("Index", "Home", new { area = "Commerce" })">
                    Go Shopping
                </a>
            </div>
            <div class="col-sm-6 dashboard-cta express">
                <a href="@Url.Action("Index", "Order", new { area = "Logistics" })">
                    Place Courier Order
                </a>
            </div>
            <div class="clear"></div>
        </div>
        <div class="dashboard-quick-ctas">
            <div class="quick-cta-item">
                <div class="quick-cta-item-content">
                    <a href="@Url.RouteUrl("ProductSearch")">
                        <div class="image"><div class="image-icon"><i class="fa fa-search"></i></div></div>
                        <div class="text">Browse Shop</div>
                    </a>
                </div>
            </div>
            <div class="quick-cta-item">
                <div class="quick-cta-item-content">
                    <a href="@Url.Action("Tracking", "Customer" )">
                        <div class="image"><img src="~/Content/images/cta-shipment.png" alt="My Shipments" /></div>
                        <div class="text">My Shipments</div>
                    </a>
                </div>
            </div>
            <div class="quick-cta-item">
                <div class="quick-cta-item-content">
                    <a href="@Url.Action("Tracking", "Customer")">
                        <div class="image"><img src="~/Content/images/cta-tracking.png" alt="Tracking" /></div>
                        <div class="text">Tracking</div>
                    </a>
                </div>
            </div>
            <div class="quick-cta-item">
                <div class="quick-cta-item-content">
                    <a href="@Url.Action("Invoices", "Customer")">
                        <div class="image"><img src="~/Content/images/cta-invoices.png" alt="My Invoices" /></div>
                        <div class="text">My Invoices</div>
                    </a>
                </div>
            </div>
            <div class="quick-cta-item">
                <div class="quick-cta-item-content">
                    <a href="@Url.Action("Addresses", "Customer")">
                        <div class="image"><img src="~/Content/images/cta-addresses.png" alt="Address Book" /></div>
                        <div class="text">Address Book</div>
                    </a>
                </div>
            </div>
            <div class="quick-cta-item">
                <div class="quick-cta-item-content">
                    <a href="@Url.Action("ChangePassword", "Customer")">
                        <div class="image"><img src="~/Content/images/cta-password.png" alt="Password" /></div>
                        <div class="text">Password</div>
                    </a>
                </div>
            </div>
            @*<div class="quick-cta-item">
                <div class="quick-cta-item-content">
                    <a href="@Url.Action("Membership", "Customer")">
                        <div class="image"><img src="~/Content/images/cta-membership.png" alt="Membership" /></div>
                        <div class="text">Memebership</div>
                    </a>
                </div>
            </div>*@
            <div class="quick-cta-item">
                <div class="quick-cta-item-content">
                    <a href="@Url.Action("Settings", "Customer")">
                        <div class="image"><img src="~/Content/images/cta-settings.png" alt="Settings" /></div>
                        <div class="text">Settings</div>
                    </a>
                </div>
            </div>
            <div class="quick-cta-item">
                <div class="quick-cta-item-content">
                    <a href="@Url.RouteUrl("ContactUs")">
                        <div class="image"><img src="~/Content/images/cta-contact.png" alt="Contact Us" /></div>
                        <div class="text">Contact Us</div>
                    </a>
                </div>
            </div>
            <div class="clear"></div>
        </div>
    </div>
    <div class="section-wrapper">
        <div class="quick-stats">
            <div class="info-row">
                <a href="@Url.Action("Addresses", "Customer")">
                    <div class="info-row-content">
                        <div class="number">@Model.AddressCount</div>
                        <h4>Saved Addresses</h4>
                        <span>In your address book</span>
                    </div>
                </a>
            </div>
            <div class="info-row">
                <a href="@Url.Action("Orders", "Customer")">
                    <div class="info-row-content">
                        <div class="number">@Model.OrderMonthlyCount</div>
                        <h4>Shopping Orders</h4>
                        <span>In the last 30 days</span>
                    </div>
                </a>
            </div>
            <div class="info-row">
                <a href="@Url.Action("Tracking", "Customer")">
                    <div class="info-row-content">
                        <div class="number">@Model.ShipmentMonthlyCount</div>
                        <h4>Courier Orders</h4>
                        <span>In the last 30 days</span>
                    </div>
                </a>
            </div>
            <div class="info-row">
                <a href="@Url.Action("Orders", "Customer")">
                    <div class="info-row-content">
                        <div class="number">@Model.InvoiceCount</div>
                        <h4>Invoices</h4>
                        <span>Year to date</span>
                    </div>
                </a>
            </div>
            <div class="clear"></div>
        </div>
        <div class="customer-recent-messages row">
            <div class="info-row col-xxs-12 col-xs-12 col-sm-12 col-md-12 col-lg-12">
                @if (Model.Events.Count > 0)
                {
                    <h4>Recent Messages</h4>
                    <table class="table table-striped">
                        <tbody>
                            @foreach (var e in Model.Events)
                            {
                                <tr><td>@e.TimeString</td><td>@e.EventName</td></tr>
                            }
                        </tbody>
                    </table>
                }
            </div>
        </div>
    </div>
</div>

<script>
    $('.number').each(function () {
        $(this).prop('Counter', 0).animate({
            Counter: $(this).text()
        }, {
            duration: 1500,
            easing: 'swing',
            step: function (now) {
                $(this).text(Math.ceil(now));
            }
        });
    });
</script>